<template>
  <div class="bottom-bar">
    <div class="check_area">
      <check-button
        :isChecked="isSelectAll"
        class="select_all"
        @click.native="checkClcik"
      ></check-button>
      <span>全选</span>
    </div>

    <div class="columnCenter total_price">合计：{{ totalPrice }}</div>

    <div class="columnCenter calculate" @click="calcuClick">去计算({{ checkLength }})</div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton";

export default {
  name: "Cartbottombar",

  data() {
    return {};
  },

  components: {
    CheckButton,
  },

  mounted() {},

  computed: {
    totalPrice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter((item) => {
            return item.checked;
          })
          .reduce((preValue, item) => {
            return Math.floor(preValue + item.price * item.count);
          }, 0)
      );
    },
    checkLength() {
      return this.$store.state.cartList.filter((item) => item.checked).length;
    },
    isSelectAll() {
      //判断购物车每个项目，是不是有一个商品没有勾选，
      //没有判断没有勾选的商品的数组长度，这个长度不为0的话
      //那就让全选按钮的选中取消
      //也就是说，只要有没有选中的商品，全选按钮就会被取消

      //filter方法
      // return !(this.$store.state.cartList.filter(item => !item.checked).length)
      if (this.$store.state.cartList.length === 0) return false;

      //find方法
      // return !this.$store.state.cartList.find((item) => !item.checked);

      //3. 普通遍历
      for (let item of this.$store.state.cartList) {
        if (!item.checked) {
          return false;
        }
      }
      return true;
    },
  },

  methods: {
    checkClcik() {
      if (this.isSelectAll) {
        //全部选中的情况  让所有商品全部取消选中
        this.$store.state.cartList.forEach((item) => (item.checked = false));
      } else {
        this.$store.state.cartList.forEach((item) => (item.checked = true));
      }
    },
    calcuClick() {
      if(!this.isSelectAll) {
        this.$toast.show('请选择购买的商品', 2000) 
      }
    }
  },
};
</script>

<style lang="css" scoped>
.bottom-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 40px;
  background-color: #eee;
}

.check_area {
  height: 100%;
  display: flex;
  align-items: center;
}

.select_all {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}

.columnCenter {
  display: flex;
  align-items: center;
}

.total_price {
  margin-right: 100px;
}

.calculate {
  height: 100%;
  /* margin-right: 20px; */
  padding: 0 10px;
  color: white;
  background-color: pink;
  font-size: 14px;
}
</style>